<script setup lang="ts">
const props = defineProps<{
  show: boolean,
  disabled: boolean
}>()

const emit = defineEmits<{
  // 为了在使用该组件的地方能够使用数据双向绑定的语法糖，我们就定义父组件的事件名称为这个
  (e: 'update:show', show: boolean): void
  // 删除订单的事件
  (e: 'on-delete'): void
  // 修改订单的事件
  (e: 'on-preview'): void
}>()

const actions = [
  { text: '查看处方', disabled: props.disabled },
  { text: '删除订单' }
]

const onSelect = (action: { text: string }, index: number) => {
  if (index === 1) {
    // 删除订单
    emit('on-delete')
  }
  if (index === 0) {
    // 查看处方
    emit('on-preview')
  }
}

</script>

<template>
  <div class="cp-consult-more">
    <van-popover placement="top-start" :show="show" @update:show="emit('update:show', $event)" :actions="actions"
      @select="onSelect">
      <template #reference> 更多 </template>
    </van-popover>
  </div>
</template>

<style lang="scss" scoped>
.cp-consult-more {
  flex: 1;
  color: var(--cp-tag);
}
</style>
